<script setup lang="jsx">
const ActionBtn = <v-btn variant="text" nd size="x-small" />

const { useSelf, useMain } = window.api
const { isDev } = window
defineProps({ minimize: Boolean })
</script>

<template>
  <section id="title-bar" class="elevation-8">
    <div class="title-content">
      <slot name="title-bar"></slot>
    </div>
    <template v-if="isDev">
      <action-btn icon="pi pi-refresh" color="#66BB6A" @click="useSelf('reload')" />
      <action-btn icon="pi pi-info-circle" color="#66BB6A" @click="useSelf('toggleDevTools')" />
    </template>
    <action-btn v-if="minimize" icon="pi pi-minus" @click="useMain('minimize')" />
    <action-btn icon="pi pi-times" color="#E57373" @click="useSelf('close')" />
  </section>
  <ScrollPanel
    id="page-content"
    :dt="{
      bar: {
        background: '#444'
      }
    }"
  >
    <section class="pa-8">
      <slot></slot>
    </section>
  </ScrollPanel>
</template>

<style lang="css">
:root {
  --title-bar-height: 2.8rem;
}

#title-bar {
  -webkit-app-region: drag;
  height: var(--title-bar-height);
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background-color: #323232;

  *[nd] {
    -webkit-app-region: no-drag;
  }

  > .v-btn {
    margin-right: 4px;
  }

  .title-content {
    flex: 1;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    height: 100%;
  }
}

#page-content {
  height: calc(100vh - var(--title-bar-height));
  width: 100%;
  overflow: hidden;
  position: relative;
}

#app[mask] {
  #title-bar {
    z-index: -1;
  }
  #appMask {
    opacity: 1;
    pointer-events: auto;
  }
  #page-content_content {
    overflow: hidden;
  }
  .p-scrollpanel-bar {
    display: none;
  }
  .float-btn {
    z-index: 100;
  }
}
</style>
